<template>
    <view>
        <u-navbar title="我的帖子" :background="background" back-icon-color="#efefef" title-color="#efefef"></u-navbar>
        <view class="wrap">
            <view v-for="item in forumList" :key="item.id">
                <view class="f-main" @click="goMain(item.id,item.forumTitle)">
                    <view class="f-title">{{ item.forumTitle }}</view>
                    <view class="box">
                        <view class="Grid-cell u-1of3">
                            <u-icon :label="item.landlord" label-color="#626768" size="25" name="/static/icon/my.png">
                            </u-icon>
                        </view>
                        <view class="Grid-cell right-to">
                            <u-icon :label="item.updateTime" label-color="#626768" size="30"
                                name="/static/icon/time.png"></u-icon>
                        </view>
                        <view class="Grid-cell u-1of7 ">
                            <u-icon :label="item.commentNumber" label-color="#626768" size="30"
                                name="/static/icon/reply.png"></u-icon>
                        </view>
                    </view>
                    <u-line color="black" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        selectMyForums
    } from "@/api/data.js"
    export default {

        data() {
            return {
                background: {
                    backgroundImage: 'linear-gradient(45deg, rgb(255, 40, 0), rgb(147, 0, 0))'
                    
                },
                forumList: [],
                myId: 0,
            }
        },
        onLoad(options) {
            this.myId = options.userId
        },
        onShow() {
            if(this.myId!=0)
            this.getForums()
        },
        methods: {
            goMain(id, title) {
                uni.navigateTo({
                    url: '/pages/forum/main/index?id=' + id + '&title=' + title
                })
            },
            getForums() {
                const _this = this
                // console.log("hellp")
                selectMyForums({
                    userId :this.myId
                }).then(function(res) {
                    // console.log(res.data.data)
                    _this.forumList = res.data.data
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        // height: 100vh;
        min-height: calc(100vh - var(--window-top));
        width: 100%;
        background-color: #f5f5f5;
        // margin-top: 80rpx;
        // background-color: #fff9ee;
    }

    .item {
        flex: 0 0
    }

    .f-title {
        width: 100%;
        font-size: 38rpx;
        padding: 25rpx 0 10rpx;
        letter-spacing: 2rpx;
        color: #2C405A;
    }

    .f-main {
        padding: 0 40rpx;
    }

    .Grid-cell {
        flex: 1;
        // padding: 20rpx 0;
    }

    .Grid-cell.u-full {
        flex: 0 0 100%;
        // background-color: #007AFF;
    }

    .Grid-cell.u-1of2 {
        flex: 0 0 50%;
        // background-color: #3F536E;
    }

    .Grid-cell.u-1of3 {
        flex: 0 0 33.3333%;
        // background-color: #ffff00;
    }

    .Grid-cell.u-1of4 {
        flex: 0 0 25%;
        // background-color: #55007f;
    }

    .Grid-cell.u-1of5 {
        flex: 0 0 20%;
        // background-color: #55007f;
    }

    .Grid-cell.u-1of7 {
        flex: 0 0 15%;
        // background-color: #55007f;
    }

    .right-to {
        // margin-left:auto;
        text-align: right;
        margin-right: 20rpx;
    }
    .box {
        display: flex;
        padding: 20rpx 0;
        color: #626768;
    }
</style>
